import React, { FC, CSSProperties } from 'react';
import classNames from 'classnames';

type treeDataType = {
  title: string | number;
  key: string | number;
  children?: treeDataType[];

  levelPath?: []; // 层级路径
  level?: []; // 层级
};

export interface treeNodeTypeProps {
  className?: string;
  style?: CSSProperties;
  title?: string;
  onClickExpand: () => {};
  onClickFold: () => {};
  nodeData: treeDataType;
}

const treeNode: FC<treeNodeTypeProps> = props => {
  debugger;
  // const classNameTrans = classNames('ant-layout-footer', props.className);
  const { onClickExpand, nodeData } = props;
  // const styleTans = {
  //   ...props.style,
  // };

  return (
    <div className="ant-tree-treenode ant-tree-treenode-switcher-close">
      <span aria-hidden="true" className="ant-tree-indent"></span>
      <span className="ant-tree-switcher ant-tree-switcher_close">
        {props.children && (
          <span
            role="img"
            aria-label="caret-down"
            onClick={onClickExpand.bind(null, nodeData.key)}
            className="anticon anticon-caret-down ant-tree-switcher-icon"
          >
            <svg
              viewBox="0 0 1024 1024"
              focusable="false"
              data-icon="caret-down"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
            </svg>
          </span>
        )}
      </span>
      <span
        title="0-0"
        className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable"
        draggable="true"
        aria-grabbed="true"
      >
        <span className="ant-tree-title">{nodeData.title}</span>
      </span>
    </div>
  );
};
export default treeNode;

/*

<div className="ant-tree-list-holder-inner" style={{display: 'flex', flexDirection: 'column'}}>
              <div className="ant-tree-treenode ant-tree-treenode-switcher-close">
                <span aria-hidden="true" className="ant-tree-indent"></span>
                <span className="ant-tree-switcher ant-tree-switcher_close">
                  <span role="img" aria-label="caret-down" className="anticon anticon-caret-down ant-tree-switcher-icon">
                    <svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                      <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
                    </svg>
                  </span>
                </span>
                <span title="0-0" className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable" draggable="true" aria-grabbed="true">
                  <span className="ant-tree-title">
                    0-0
                  </span>
                </span>
              </div>
              <div className="ant-tree-treenode ant-tree-treenode-switcher-open">
                <span aria-hidden="true" className="ant-tree-indent"></span>
                <span className="ant-tree-switcher ant-tree-switcher_open">
                  <span role="img" aria-label="caret-down" className="anticon anticon-caret-down ant-tree-switcher-icon">
                    <svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                      <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
                    </svg>
                  </span>
                </span>
                <span title="0-1" className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable" draggable="true" aria-grabbed="true">
                  <span className="ant-tree-title">
                    0-1
                  </span>
                </span>
              </div>
              <div className="ant-tree-treenode ant-tree-treenode-switcher-close">
                <span aria-hidden="true" className="ant-tree-indent">
                  <span className="ant-tree-indent-unit"></span>
                </span>
                <span className="ant-tree-switcher ant-tree-switcher_close">
                  <span role="img" aria-label="caret-down" className="anticon anticon-caret-down ant-tree-switcher-icon">
                    <svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                      <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
                    </svg>
                  </span>
                </span>
                <span title="0-1-0" className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-close draggable" draggable="true" aria-grabbed="true">
                  <span className="ant-tree-title">0-1-0</span>
                </span>
              </div>
              <div className="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-selected ant-tree-treenode-leaf-last">
                <span aria-hidden="true" className="ant-tree-indent">
                  <span className="ant-tree-indent-unit"></span>
                </span>
                <span className="ant-tree-switcher ant-tree-switcher-noop"></span>
                <span title="0-1-2"
                      className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal ant-tree-node-selected draggable"
                      draggable="true"
                      aria-grabbed="true">
                  <span className="ant-tree-title">0-1-2</span>
                </span>
              </div>
              <div className="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last">
                <span aria-hidden="true" className="ant-tree-indent"></span>
                <span className="ant-tree-switcher ant-tree-switcher-noop"></span>
                <span title="0-2"
                      className="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
                      draggable="true"
                      aria-grabbed="true">
                  <span className="ant-tree-title">0-2</span>
                </span>
              </div>
            </div>
* */
